---
import TableOfContents from './TableOfContents';
import MoreMenu from './MoreMenu.astro';
import type { MarkdownHeading } from 'astro';

type Props = {
  headings: MarkdownHeading[];
  githubEditUrl: string;
};

const { headings, githubEditUrl } = Astro.props as Props;
---

<nav class="sidebar-nav" aria-labelledby="grid-right">
  <div class="sidebar-nav-inner">
    <TableOfContents client:media="(min-width: 50em)" headings={headings} />
    <MoreMenu editHref={githubEditUrl} />
  </div>
</nav>

<style>
  .sidebar-nav {
    width: 100%;
    position: sticky;
    top: 0;
  }

  .sidebar-nav-inner {
    height: 100%;
    padding: 0;
    padding-top: var(--doc-padding);
    overflow: auto;
  }
</style>
